(function () {
  class TyphoonYuCeLineLayer extends BaseLayer {
    constructor(config = {}) {
      super(config);
      this.minZoom = 0
      this.maxZoom = 21
      this.name =  'TyphoonYuCeLineLayer'
      this.noneTips = true
      this.initLayer({
        type: 'line',
        'layout': {
          'line-join': ['get', 'lineJoin'],
          'line-cap': ['get', 'lineCap']
        },
        'paint': {
          'line-color': ['get', 'lineColor'],
          'line-width': ['get', 'lineWidth'],
          'line-dasharray': [5, 3]
        }
      })

    }


    getStyle(item) {
      item = Object.assign({}, item, {
        lineColor: item.lineColor || '#f67676',
        lineWidth: item.lineWidth || 2,
      })
      return item
    }

    makeFeature(item) {
      item = this.getStyle(item)
      let f = {
        type: 'Feature',
        geometry: {
          type: 'LineString',
          coordinates: item.lineCoor
        },
        properties: {
          lineJoin: 'round',
          lineCap: 'round',
          icon: item.icon,
          ...item,
          data: item,
        }
      }
      return f
    }

    loadData(item) {
      if (!item) return
      if (item.forecast) {
        let chinaTypoonData = item.forecast.filter(it => it.sets === '中国')
        let points = chinaTypoonData[0].points.map(it => {
          return [it.lng, it.lat]
        })
        points.unshift([item.lng, item.lat])
        this.cacheData = [
          {
            lineCoor: points,
          }
        ]
        this.refreshLayer()
        let TyphoonYuPointLayer = window.layerManager.get('TyphoonYuPointLayer')
        TyphoonYuPointLayer.loadData(chinaTypoonData)
      }

    }
  }


  window.addEventListener('mapCreatedEvent', ev => {
    new TyphoonYuCeLineLayer({
      name: 'TyphoonYuCeLineLayer'
    })
  })
})();
